<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			canvas{
				border: 1px solid #333;
			}
		</style>
	</head>
	<body>
		<!-- canvas画布的大小，不能用css来调整，用属性来调整 -->
		<canvas id="canvas" width="600" height="400"></canvas>
		
	</body>
	<script type="text/javascript">
		//获取画布
		let canvas=document.getElementById("canvas");
		//获取上下文
		let ctx=canvas.getContext("2d");
		
		//绘制弧线
		
		//顺时针绘制半圆
		// ctx.arc(300,200,100,0,Math.PI,false)
		
		//逆时针绘制半圆
		// ctx.arc(300,200,100,0,Math.PI,true)
		
		//绘制四分之三圆
		// ctx.arc(300,200,100,0,Math.PI*1.5,false)
		
		// ctx.arc(300,200,100,0,-Math.PI*1.5,true)
		
		//绘制四分之一圆
		// ctx.arc(300,200,100,Math.PI/2,Math.PI,true)
		// ctx.closePath()
		
		
		//缺角四分之三圆
		// ctx.arc(300,200,100,Math.PI/2,Math.PI,true)
		// ctx.lineTo(300,200)
		// ctx.closePath()
		// ctx.fillStyle="#ed1c24"
		// ctx.fill()
		
		
		//移动坐标系
		ctx.translate(300,200)
		ctx.arc(0,0,100,0,Math.PI*2,false)
		ctx.stroke()
		
		
		
		
	</script>
</html>